<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title></title>
    <script src="js/mui.min.js"></script>
    <link href="css/mui.min.css" rel="stylesheet"/>
    
    		<style type="text/css">
    		
    		
    		
			.mui-preview-image.mui-fullscreen {
				position: fixed;
				z-index: 20;
				background-color: #000;
			}
			.mui-preview-header,
			.mui-preview-footer {
				position: absolute;
				width: 100%;
				left: 0;
				z-index: 10;
			}
			.mui-preview-header {
				height: 44px;
				top: 0;
			}
			.mui-preview-footer {
				height: 50px;
				bottom: 0px;
			}
			.mui-preview-header .mui-preview-indicator {
				display: block;
				line-height: 25px;
				color: #fff;
				text-align: center;
				margin: 15px auto 4;
				width: 70px;
				background-color: rgba(0, 0, 0, 0.4);
				border-radius: 12px;
				font-size: 16px;
			}
			.mui-preview-image {
				display: none;
				-webkit-animation-duration: 0.5s;
				animation-duration: 0.5s;
				-webkit-animation-fill-mode: both;
				animation-fill-mode: both;
			}
			.mui-preview-image.mui-preview-in {
				-webkit-animation-name: fadeIn;
				animation-name: fadeIn;
			}
			.mui-preview-image.mui-preview-out {
				background: none;
				-webkit-animation-name: fadeOut;
				animation-name: fadeOut;
			}
			.mui-preview-image.mui-preview-out .mui-preview-header,
			.mui-preview-image.mui-preview-out .mui-preview-footer {
				display: none;
			}
			.mui-zoom-scroller {
				position: absolute;
				display: -webkit-box;
				display: -webkit-flex;
				display: flex;
				-webkit-box-align: center;
				-webkit-align-items: center;
				align-items: center;
				-webkit-box-pack: center;
				-webkit-justify-content: center;
				justify-content: center;
				left: 0;
				right: 0;
				bottom: 0;
				top: 0;
				width: 100%;
				height: 100%;
				margin: 0;
				-webkit-backface-visibility: hidden;
			}
			.mui-zoom {
				-webkit-transform-style: preserve-3d;
				transform-style: preserve-3d;
			}
			.mui-slider .mui-slider-group .mui-slider-item img {
				width: auto;
				height: auto;
				max-width: 100%;
				max-height: 100%;
			}
			.mui-android-4-1 .mui-slider .mui-slider-group .mui-slider-item img {
				width: 100%;
			}
			.mui-android-4-1 .mui-slider.mui-preview-image .mui-slider-group .mui-slider-item {
				display: inline-table;
			}
			.mui-android-4-1 .mui-slider.mui-preview-image .mui-zoom-scroller img {
				display: table-cell;
				vertical-align: middle;
			}
			.mui-preview-loading {
				position: absolute;
				width: 100%;
				height: 100%;
				top: 0;
				left: 0;
				display: none;
			}
			.mui-preview-loading.mui-active {
				display: block;
			}
			.mui-preview-loading .mui-spinner-white {
				position: absolute;
				top: 50%;
				left: 50%;
				margin-left: -25px;
				margin-top: -25px;
				height: 50px;
				width: 50px;
			}
			.mui-preview-image img.mui-transitioning {
				-webkit-transition: -webkit-transform 0.5s ease, opacity 0.5s ease;
				transition: transform 0.5s ease, opacity 0.5s ease;
			}
			@-webkit-keyframes fadeIn {
				0% {
					opacity: 0;
				}
				100% {
					opacity: 1;
				}
			}
			@keyframes fadeIn {
				0% {
					opacity: 0;
				}
				100% {
					opacity: 1;
				}
			}
			@-webkit-keyframes fadeOut {
				0% {
					opacity: 1;
				}
				100% {
					opacity: 0;
				}
			}
			@keyframes fadeOut {
				0% {
					opacity: 1;
				}
				100% {
					opacity: 0;
				}
			}
			p img {
				max-width: 100%;
				height: auto;
			}
			
			
			.title{
				margin: 20px 15px 10px;
				color: #6d6d72;
				font-size: 15px;
			}
			
			.oa-contact-cell.mui-table .mui-table-cell {
				padding: 11px 0;
				vertical-align: middle;
			}
			
			.oa-contact-cell {
				position: relative;
				margin: -11px 0;
			}
	
			.oa-contact-avatar {
				width: 75px;
			}
			.oa-contact-avatar img {
				border-radius: 50%;
			}
			.oa-contact-content {
				width: 100%;
			}
			.oa-contact-name {
				margin-right: 20px;
			}
			.oa-contact-name, oa-contact-position {
				float: left;
			}
			p {
				text-indent: 22px;
			}
			span.mui-icon {
				font-size: 14px;
				color: #007aff;
				margin-left: -15px;
				padding-right: 10px;
			}
			#info {
				padding: 20px 10px;
			}
			.des {
				margin: .5em 0;
			}
			.des>li {
				font-size: 14px;
				color: #8f8f94;
			}
		</style>
</head>
<body>
	<audio id="music2" src="yinyue/orage.mp3" autoplay="autoplay" loop="loop"></audio>
	 
	<header class="mui-bar mui-bar-nav">
			<a href="saomiao.html"id="scan" class=" mui-icon  mui-pull-left" 
			style="width:20%;height: 100%; "><img src="images/ma.jpg" style="width: 30%;"></a>
		
			<h1 class="mui-title">关于我</h1>
			
			<!--<input type="button" id="tape"  value="相机"  
				class="mui-icon mui-icon-camera mui-action-back mui-icon mui-icon-left-nav mui-pull-right" 
				style="width:20%;height: 100%; " />-->
				<p>
					<a href="#picture" class="mui-icon mui-icon-camera  mui-icon  mui-pull-right"  
						style="width:20%;height: 100%; " ></a>
				</p>
		</header>
		<nav class="mui-bar mui-bar-tab">
			<a class="mui-tab-item mui-active" href="#tabbar">
				<span class="mui-icon mui-icon-contact"></span>
				<span class="mui-tab-label">我</span>
			</a>
			<a class="mui-tab-item" href="#tabbar-with-chat">
				<span class="mui-icon mui-icon-person"></span>
				<span class="mui-tab-label">经历</span>
			</a>
			<a class="mui-tab-item" href="#tabbar-with-contact">
				<span class="mui-icon mui-icon-personadd"></span>
				<span class="mui-tab-label">工作</span>
			</a>
			<a class="mui-tab-item" href="#tabbar-with-map">
				<span class="mui-icon mui-icon-starhalf"></span>
				<span class="mui-tab-label">项目</span>
			</a>
		</nav>
		<div class="mui-content">
			<div id="tabbar" class="mui-control-content mui-active">
				
		<div class="mui-content">
			<div class="title">
				<img src="images/taes.png" style="width: 50%;margin-left: 25%;"/>
			</div>
			
			<div class="title">
				姓名：
			</div>
			<ul class="mui-table-view">
				 <li class="mui-table-view-cell">贺小洋</li>
			</ul>
			<div class="title">
				电话：
			</div>
			<ul class="mui-table-view">
				<li class="mui-table-view-cell">
					<a class="mui-navigate-right">
						18628017297
					</a>
				</li>
				
			</ul>
		    <div class="title">
				QQ邮箱：
			</div>
			<div class="mui-card" style="margin-bottom: 35px;">
				<ul class="mui-table-view">
					<li class="mui-table-view-cell">
						<a class="mui-navigate-right">
							542760644@qq.com
						</a>
					</li>
					
				</ul>
				
			</div>
		</div>
		
		<!--第二个子页面-->
			</div>
			<div id="tabbar-with-chat" class="mui-control-content">
				
	
		<div class="mui-content">
			<div class="mui-content-padded">
				<h3>本人毕业于XXXX大学</h3>
				<p>
					<img src="images/taes.png" data-preview-src="" data-preview-group="1" />
				</p>
				<h4>学习经历：</h4>
				<p>在XXXXXX水水水水 额和如何更好地上个hiGFoFGERGWOGIEGHEUGESHESGHGORHIH 粉丝纷纷为服务费GIF额无功无过付服务费恭王府覅伟哥哥覅股份</p>
				<h4>时间：XXXX年XX月XX日</h4>
				
			</div>
		</div>
				
			</div>
			
			<!--第三个子页面-->
			<div id="tabbar-with-contact" class="mui-control-content">
				
		<div class="mui-content">
			<div class="mui-card">
				<div class="mui-card-content">
					<div class="mui-card-content-inner">
					<img src="images/taes.png" style="width: 100px;height: 100px;" />XXXXXXXXX公司
					</div>
				</div>
			</div>
			<div class="mui-card">
				
				<div class="mui-card-content">
					<div class="mui-card-content-inner">
						<img src="images/taes.png" />
					</div>
				</div>
				<div class="mui-card-footer">岗位：前端开发</div>
				<div class="mui-card-footer">时间：XXXX年XX月XX日</div>
				<div class="mui-card-footer">汇报对象：</div>
				<div class="mui-card-footer">企业类型：</div>
				<div class="mui-card-footer">公司网址：</div>
				<div class="mui-card-footer">项目：</div>
			</div>
			
			
			
			
		</div>
				
				
			</div>
			
			<!--第4个子页-->
			<div id="tabbar-with-map" class="mui-control-content">
				<div class="mui-card">
				<div class="mui-card-content">
					<div class="mui-card-content-inner">
					<img src="images/taes.png" style="width: 100px;height: 100px;" />XXXXXXXXX项目
					</div>
				</div>
			</div>
			<div class="mui-card">
				
				<div class="mui-card-content">
					<div class="mui-card-content-inner">
						<img src="images/taes.png" />
					</div>
				</div>
				<div class="mui-card-footer">网址：www.xxxxx.com</div>
				<div class="mui-card-footer">项目详情：</div>
				<div class="mui-card-footer">团队成员：</div>
				<div class="mui-card-footer">技术：
					<div class="mui-page-content">
				<div class="mui-scroll-wrapper">
					<div class="mui-scroll">
						<ul class="mui-table-view mui-table-view-chevron">
							<li class="mui-table-view-cell mui-media">
								<a class="mui-navigate-right" href="ziye.html">
									<img class="mui-media-object mui-pull-left head-img" id="head-img" src="">
									<div class="mui-media-body">
										Hello MUI
									</div>
								</a>
							</li>
						</ul>
						</div>
						</div>
				</div>
				
			</div>
			
		</div>
			</div>
			
			
			
			
		<div class="mui-content">
			<div class="mui-content-padded">

				<p id="info"></p>
			</div>
		</div>

		
		<div id="picture" class="mui-popover mui-popover-action mui-popover-bottom">
			<ul class="mui-table-view">
				<li class="mui-table-view-cell">
					<a href="xiangji.html" id="tape">拍照</a>
				</li>
				<li class="mui-table-view-cell">
					<a href="#">选择本地相册</a>
				</li>
			</ul>
			<ul class="mui-table-view">
				<li class="mui-table-view-cell">
					<a href="#picture"><b>取消</b></a>
				</li>
			</ul>
		</div>
			
<script type="text/javascript">
mui.init({
			swipeBack:true //启用右滑关闭功能
		});
		// 扩展API加载完毕后调用onPlusReady回调函数 
		document.addEventListener( "plusready", onPlusReady, false );
		
	function onPlusReady() {
		
//			mui.plusReady(function() {
//				//读取本地存储，检查是否为首次启动
//				var showGuide = plus.storage.getItem("lauchFlag");
//				//仅支持竖屏显示
//				plus.screen.lockOrientation("portrait-primary");
//				if(showGuide) {
//					//有值，说明已经显示过了，无需显示；
//					//关闭splash页面；
//					plus.navigator.closeSplashscreen();
//					plus.navigator.setFullscreen(false);
//				} else {
					//显示启动导航
					mui.openWindow({
						id: 'guide',
						url: 'guide.html',
						styles: {
							popGesture: "none"
						},
						show: {
							aniShow: 'none'
						},
						waiting: {
							autoShow: false
						}
					});
//				}
//			});

		}

	document.getElementById('scan').addEventListener('tap', function() {
		  //打开关于页面
		  mui.openWindow({
		    url: 'saomiao.html', 
		    id:'scan',
		    show:{
		      autoShow:true,//页面loaded事件发生后自动显示，默认为true
		      aniShow:'zoom-out'//页面显示动画，默认为”slide-in-right“；
		    },
		  });
		});
		document.getElementById('tape').addEventListener('tap', function() {
		  //打开关于页面
		  mui.openWindow({
		    url: 'xiangji.html', 
		    id:'tape',
		    show:{
		      autoShow:true,//页面loaded事件发生后自动显示，默认为true
		      aniShow:'zoom-out'//页面显示动画，默认为”slide-in-right“；
		    },
		  });
		});
		
		
		mui('body').on('shown', '.mui-popover', function(e) {
			//console.log('shown', e.detail.id);//detail为当前popover元素
		});
		mui('body').on('hidden', '.mui-popover', function(e) {
			//console.log('hidden', e.detail.id);//detail为当前popover元素
		});
		var info = document.getElementById("info");
		mui('body').on('tap', '.mui-popover-action li>a', function() {
			var a = this,
				parent;
			//根据点击按钮，反推当前是哪个actionsheet
			for (parent = a.parentNode; parent != document.body; parent = parent.parentNode) {
				if (parent.classList.contains('mui-popover-action')) {
					break;
				}
			}
			//关闭actionsheet
			mui('#' + parent.id).popover('toggle');
			info.innerHTML = "你刚点击了\"" + a.innerHTML + "\"按钮";
		})
		
		
		
		

</script>
			
		

		
	
</body>
</html>